<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>插槽作用域示例</title>
    </head>
    <body>
        <div id="app">
            <cpn1>
                <!-- slot-scope 指向子组件中的插槽对象 -->
                <!-- 自 2.6.0 起有所更新。已废弃的使用 slot-scope attribute 的语法在这里。 -->
                <!-- <template slot-scope="slot"> -->
                    <!-- <span v-slot="data" v-for="language in pLanguages">{{language}}-</span> -->
                <template v-slot:default="childData">
                    <!-- <span v-for="language in childData.data">{{language}} - </span> -->
                    <span>{{childData.data.join(' - ')}}</span>
                </template>
            </cpn1>
            <cpn1>
                <template v-slot="childData">
                    <!-- <span v-for="language in childData.data">{{language}} * </span> -->
                    <span>{{childData.data.join(' * ')}}</span>
                </template>
            </cpn1>
        </div>
    </body>
    <template id="cpn1">
        <div>
            <slot :data="pLanguages">
                <ul>
                    <li v-for="language in pLanguages">{{language}}</li>
                </ul>
            </slot>
        </div>
    </template>
    <script src="../js/vue.js" charset="utf-8"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: '#app',
            data: {},
            components: {
                cpn1: {
                    template: '#cpn1',
                    data: () => {
                        return {
                            pLanguages: [
                                'JavaScript',
                                'Java',
                                'C',
                                'Swift',
                                'Python',
                                'Go'
                            ]
                        }
                    }
                    // data() {     return {         pLanguages: [             'JavaScript',             'Java',             'C',             'Swift',             'Python',             'Go'         ]     } }
                }
            }
        });
    </script>
</html>
